$(function() {
	new Vue({
		el: "#orderReportListApp",
		data: {
			dateValues:new Array(),
			form:{},
			fullscreenLoading:false,
		},
		created:function(){
			parent.vueData.$data.hreHtml = "../orderReport/index.html";
			parent.vueData.activeIndex = "1";
			parent.vueData.getLeftNav("1")
			parent.vueData.$data.categoryIndex = 0
			this.getgetBrief("");
			
		},
		methods: {
			  getgetBrief(text){
				  this.fullscreenLoading = true;
				  axios({
				  	url: POSTURL.getBrief,
				  	method: 'post',
				  	data:{
						data:text
					}
				  }).then(response => {
				  	this.fullscreenLoading = false;
				  	if (response.data.code === 100) {
						this.form.totalAmount  = response.data.result.totalAmount
						this.form.ordersTotal  = response.data.result.ordersTotal
						this.form.userNumber  = response.data.result.userNumber
						let list =  response.data.result.orderAndSale
						this.handelData(list);
				  	} else {
				  		this.$message.error(response.data.message);
				  	}
				  }).catch(error => {
				  	this.fullscreenLoading = false;
				  	console.log(error);
				  	this.$message.error('服务器出错!');
				  })
			  },
			   getNextDay(d){
			      d = new Date(d);
			      d = +d + 1000*60*60*24;
			      d = new Date(d);
			      //格式化
			      return d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
			       
			  },
			  searchBtn(){
				   
				  let upDateList = [];
				  if(this.dateValues instanceof Array){
					 if(this.dateValues.length>0){
					 					 upDateList.push(this.dateValues[0])
					 					let data = this.dateValues[1];
					 					var endData  = this.getNextDay(data);
					 					upDateList.push(endData);
					 }
				  }
				  
				  let dateStr = upDateList.join(',')
				  this.fullscreenLoading = true;
				  let param = {
				  	data: dateStr,
				  }
				  axios({
				  	url: POSTURL.getOrderAndSale,
				  	method: 'post',
				  	data: param
				  }).then(response => {
				  	this.fullscreenLoading = false;
				  	if (response.data.code === 100) {
				  		 this.handelData(response.data.result)
				  	} else {
				  		this.$message.error(response.data.message);
				  	}
				  }).catch(error => {
				  	this.fullscreenLoading = false;
				  	console.log(error);
				  	this.$message.error('服务器出错!');
				  })
				 
			  },
			  handelData(list){
				  let values = [];
				  let keys  = [];
				  let amountValues =[];
				  let amountKeys =[];
				  if(list.length>0){
				  	let orderList  =  list[1];
				  	for (let key in orderList) {
				  		let value = orderList[key]
				  		values.push(value)
				  		keys.push(key)
				      }
				  	let amountList  =  list[0];
				  	for (let key in amountList) {
				  		let value =amountList[key]
				  		amountValues.push(value)
				  		amountKeys.push(key)
				  	}
				  	
				  }
				  var orderEndPercent = (6/ keys.length) * 100
				  myChart.setOption({
				  	xAxis: {
				  		name: '日期',
				  		axisLabel: {
				  			interval: 0,
				  			textStyle: {
				  				color: "#a9a9a9", //更改坐标轴文字颜色
				  				fontSize: 10 //更改坐标轴文字大小
				  			},
				  		},
				  		axisLine: {
				  			symbol: ['none', 'arrow'],
				  			symbolSize: [8, 8],
				  			symbolOffset: [0, 7],
				  
				  		},
				  		data: keys,
				  	},
				  	series: [{
				  		name: '订单数',
				  		type: 'bar',
				  		data: values,
				  	}],
				  	dataZoom: [ //给x轴设置滚动条
				  		{
				  			start: 0, //默认为0  
				  			end: orderEndPercent,
				  			type: 'slider',
				  			show: true,
				  			xAxisIndex: [0],
				  			handleSize: 0, //滑动条的 左右2个滑动条的大小  
				  			height: 8, //组件高度  
				  			left: 50, //左边的距离  
				  			right: 40, //右边的距离  
				  			bottom: 26, //右边的距离  
				  			handleColor: '#ddd', //h滑动图标的颜色  
				  			handleStyle: {
				  				borderColor: "#cacaca",
				  				borderWidth: "1",
				  				shadowBlur: 2,
				  				background: "#ddd",
				  				shadowColor: "#ddd",
				  			},
				  			fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
				  				//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变  
				  				//给第一个设置0，第四个设置1，就是垂直渐变  
				  				offset: 0,
				  				color: '#1eb5e5'
				  			}, {
				  				offset: 1,
				  				color: '#5ccbb1'
				  			}]),
				  			backgroundColor: '#ddd', //两边未选中的滑动条区域的颜色  
				  			showDataShadow: false, //是否显示数据阴影 默认auto  
				  			showDetail: false, //即拖拽时候是否显示详细数值信息 默认true  
				  			handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
				  			filterMode: 'filter'
				  		},
				  					
				  	],
				  })
				  
				  var endPercent = (6/ amountKeys.length) * 100
				  sellChart.setOption({
				  	xAxis: {
				  		name: '日期',
				  		axisLabel: {
				  			interval: 0,
				  			formatter: function(value) {
				  				var ret = ""; //拼接加\n返回的类目项  
				  				var maxLength = 10; //每项显示文字个数  
				  				var valLength = value.length; //X轴类目项的文字个数  
				  				var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
				  				if (rowN > 1) //如果类目项的文字大于3,  
				  				{
				  					for (var i = 0; i < rowN; i++) {
				  						var temp = ""; //每次截取的字符串  
				  						var start = i * maxLength; //开始截取的位置  
				  						var end = start + maxLength; //结束截取的位置  
				  						//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
				  						temp = value.substring(start, end) + "\n";
				  						ret += temp; //凭借最终的字符串  
				  					}
				  					return ret;
				  				} else {
				  					return value;
				  				}
				  			},
				  			textStyle: {
				  				color: "#a9a9a9", //更改坐标轴文字颜色
				  				fontSize: 10 //更改坐标轴文字大小
				  			},
				  		},
				  		axisLine: {
				  			symbol: ['none', 'arrow'],
				  			symbolSize: [8, 8],
				  			symbolOffset: [0, 7],
				  
				  		},
				  		data: amountKeys,
				  	},
				  	series: [{
				  		name: '金额',
				  		type: 'bar',
				  		data: amountValues
				  	}],
				  	dataZoom: [ //给x轴设置滚动条  
				  		{
				  			start: 0, //默认为0  
				  			end: endPercent,
				  			type: 'slider',
				  			show: true,
				  			xAxisIndex: [0],
				  			handleSize: 0, //滑动条的 左右2个滑动条的大小  
				  			height: 8, //组件高度  
				  			left: 50, //左边的距离  
				  			right: 40, //右边的距离  
				  			bottom: 26, //右边的距离  
				  			handleColor: '#ddd', //h滑动图标的颜色  
				  			handleStyle: {
				  				borderColor: "#cacaca",
				  				borderWidth: "1",
				  				shadowBlur: 2,
				  				background: "#ddd",
				  				shadowColor: "#ddd",
				  			},
				  			fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
				  				//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变  
				  				//给第一个设置0，第四个设置1，就是垂直渐变  
				  				offset: 0,
				  				color: '#1eb5e5'
				  			}, {
				  				offset: 1,
				  				color: '#5ccbb1'
				  			}]),
				  			backgroundColor: '#ddd', //两边未选中的滑动条区域的颜色  
				  			showDataShadow: false, //是否显示数据阴影 默认auto  
				  			showDetail: false, //即拖拽时候是否显示详细数值信息 默认true  
				  			handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
				  			filterMode: 'filter'
				  		},
				  		
				  	],
				  
				  })
			  }
		}
	})
	var myChart = echarts.init(document.getElementById('main'));
	var option = {
		title: {
			text: '订单数量'
		},
		tooltip: {},
		xAxis: {
			name: '日期',
			axisLine: {
				symbol: ['none', 'arrow'],
				symbolSize: [8, 8],
				symbolOffset: [0, 7],

			},
			data: [],
		},
		yAxis: {
			name: '订单数',
			axisLine: {
				symbol: ['none', 'arrow'],
				symbolSize: [8, 8],
				symbolOffset: [0, 7],
			},
		},
		toolbox: { //可视化的工具箱
			show: true,
			 // orient: 'vertical',  
			feature: {
				restore: { //重置
					show: true
				},
				saveAsImage: { //保存图片
					show: true
				},
				magicType: { //动态类型切换
					type: ['bar', 'line']
				}
			}
		},
		series: [{
			name: '订单数',
			type: 'bar',
			data: []
		}]
	};
	myChart.setOption(option);
	
	var sellChart = echarts.init(document.getElementById('sellMain'));
	var option2 = {
		title: {
			text: '销售额'
		},
		tooltip: {},
		xAxis: {
			name: '月份',
			axisLine: {
				symbol: ['none', 'arrow'],
				symbolSize: [8, 8],
				symbolOffset: [0, 7],
	
			},
			data: [201806, 201807, 201808, 201809, 201810, 201811, 201812],
		},
		yAxis: {
			name: '金额',
			axisLine: {
				symbol: ['none', 'arrow'],
				symbolSize: [8, 8],
				symbolOffset: [0, 7],
			},
		},
		toolbox: { //可视化的工具箱
			show: true,
			 // orient: 'vertical',  
			feature: {
				restore: { //重置
					show: true
				},
				saveAsImage: { //保存图片
					show: true
				},
				magicType: { //动态类型切换
					type: ['bar', 'line']
				}
			}
		},
		series: [{
			name: '日期',
			type: 'bar',
			data: [5, 20, 36, 10, 100, 20]
		}]
	};
	sellChart.setOption(option2);

})
